<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-07-30 23:01:37
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-14 20:40:23
 * @version: 1.2.4
 * @Description: tabs导航栏
-->
<script setup lang="ts">
import { props, Emits, IResultCommand } from '../props';
import {SvgIcon} from '../../../SvgIcon'

import type { TabsPaneContext } from 'element-plus';
const emit = defineEmits<Emits>();
const { activeTab, tabList, tabsHeight, commandOptions } = defineProps(props);
const dropdownRef = ref<any>();
const handleChange = (visible: boolean, name: string) => {
    if (!visible) return
    dropdownRef.value.forEach((item: { id: string; handleClose: () => void }) => {
        if (item.id === name) return
        item.handleClose()
    })
}

const active=ref(activeTab);
</script>
<template>
    <div class="tabs">
        <el-tabs type="card" v-model="active" editable :style="{ '--el-tabs-header-height': tabsHeight + 'px' }"
            @tab-click="((pane: TabsPaneContext, ev: Event) => { emit('tabClick', pane, ev) })"
            @tab-remove="((path: string) => { emit('tabRemove', path) })">
            <el-tab-pane v-for="(item, index) in tabList" :key="item.path" :label="item.title" :name="item.path">
                <template #label>
                    <el-dropdown :trigger="['contextmenu']" ref="dropdownRef" :id="item.title"
                        @visible-change="handleChange($event, item.title)" @command="((command: IResultCommand) => {
                            emit('handleCommand', command)
                        })">
                        <span style="color: var(--el-color-primary)">
                            <SvgIcon :icon="item.icon" />
                            {{ item.title }}
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="i in commandOptions"
                                    :command="{ command: i.value, path: item.path }">
                                    <SvgIcon :icon="i.icon" />
                                    {{ i.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style scoped lang="scss">
.tabs {
    box-shadow: 0 1px 3px #0000001f, 0 0 3px #0000000a;
}

//文本样式
:deep(.el-tabs__item) {
    text-align: center !important;
    margin-right: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #0000001f;
    gap: 3px;
    // color:var(--ep-color-primary)
}

//去除tabs边框
:deep(.el-tabs__nav) {
    border: none !important;
}

:deep(.el-tabs--card > .el-tabs__header) {
    border: none !important;
    margin: 0 0 1px;

    .el-tabs__item {
        border: none;
    }
}

//去除tabs 增加按钮
:deep(.el-tabs__new-tab) {
    display: none;
}

//隐藏tabs主内容区域
:deep(.el-tabs__content) {
    display: none !important;
}

:deep(.el-tabs__item:hover) {
    background-color: var(--el-color-hover-primary);
    border: 1px solid var(--el-color-primary);
}

:deep(.is-active) {
    background-color: var(--el-color-hover-primary);
    border: 1px solid var(--el-color-primary);
    transition: 0.3s all;
}
</style>